<script>
  export default {
    name: "list",
    data(){
      return {
        
      }
    },
    methods: {
      onClickSetting(){
        this.$tn.message.toast('点击了设置按钮')
      }
    },
  }
</script>
<template>
  <view class="components-list tn-safe-area-inset-bottom">
    <tn-nav-bar fixed>列表</tn-nav-bar>
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <tn-list-view
        unlined="bottom"
        :customTitle="true"
      >
        <template slot="title">
          <view class="custom-title">
            <tn-button
              backgroundColor="tn-main-gradient-indigo"
              @click="onClickSetting"
            >
              设置
            </tn-button>
          </view>
        </template>
        <!-- arrow 控制是否显示右箭头 -->
        <tn-list-cell arrow>菜单1</tn-list-cell>
        <tn-list-cell>菜单2</tn-list-cell>
        <tn-list-cell>菜单3</tn-list-cell>
      </tn-list-view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .components-list {
    background-color: $tn-bg-gray-color;
    min-height: 100vh;
  }
  
  .custom-title {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 10rpx 20rpx;
  }
</style>